<template>
    <div>
    <detail-dialog-panel v-bind="$attrs" v-on="$listeners" :title="'查看-'+row.title">
        <el-tabs tab-position="left" v-bind="$attrs" v-on="$listeners" class="detail-tab"
                 v-model="activeName" @tab-click="tabClick">
            <el-tab-pane label="简况" :name="'sixth'" :key="0">
                <div class="content">
                    <slot name="form" :data="row">
                    </slot>
                    <div  style="margin: 0 auto; overflow-x: auto;flex: 1">
                      <my-html :row="row"></my-html>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="正文" name="first" :key="1">
                <div class="content">
                  <div style="flex: 1">
                  <slot :data="row"></slot>
                  </div>
                  <center-block v-if="!model&&showWorkFlow" class="right-block" title="流程">
                    <right-steps :row="row" :is-all="false" :showActiveBtn="showActiveBtn"></right-steps>
                  </center-block>
                </div>
            </el-tab-pane>
            <el-tab-pane label="附件" name="second" v-if="row.files" slot="otherItem">
              <attachments-list :files="row.files" @preview="showPreview"></attachments-list>
            </el-tab-pane>
            <el-tab-pane label="动态" name="third" v-if="showWorkFlow&&flowInfo.show_flow" :key="4">
                <top-step :row="row"  direction="vertical"></top-step>
            </el-tab-pane>
            <el-tab-pane label="流程图" :lazy="true" name="forth" v-if="showWorkFlow&&flowInfo.show_flow"  :key="5">
                <process :id="row.workflow"></process>
            </el-tab-pane>
            <el-tab-pane label="流程" v-if="model&&showWorkFlow" name="fifth" :key="2">
                <div style="overflow-y: scroll;height: 100%;">
                    <right-steps :row="row" :is-all="true"></right-steps>
                </div>
            </el-tab-pane>
            <el-tab-pane label="关联" v-if="row.relation_id" name="seven" :key="3">
                <div class="jiankuang">
                    <slot name="form">
                    </slot>
                    <div>
                        <iframe
                                :src="glUrl"
                                width="100%"
                                height="100%"
                                frameborder="0"
                                scrolling="auto"
                                id="glIframe"
                                name="glIframe"
                        ></iframe>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <div slot="right">
            <active-button v-if="showActiveBtn" :row="row"></active-button>
            <issue-button :row="row"></issue-button><!-- 分发传阅 -->
            <notes-button :row="row"></notes-button>
            <notes-list-button :row="row"></notes-list-button>
            <square-button title="打印审批单" icon="el-icon-printer" @click="print"></square-button>
            <square-button title="下载" icon="el-icon-download" @click="download"></square-button>
            <square-button title="切换模式" icon="el-icon-guide" @click="changeModel"></square-button>
            <suggestion-button v-if="showActiveBtn"></suggestion-button>
        </div>
      </detail-dialog-panel>
      <preview-file :files="row.files" v-if="row.files&&visible" :visible.sync="visible"></preview-file></div>
</template>
<script>
    import DetailDialogPanel from "./Case/DetailDialogPanel";
    import SquareButton from "./Case/SquareButton";
    import RightSteps from "./Case/RightSteps";
    import CenterBlock from "./Case/CenterBlock";
    import ActiveButton from "./Case/ActiveButton";
    import IssueButton from "@/components/WorkFlowsDialog/Case/Buttons/IssueButton";
    import TopStep from "../../views/workManagement/components/topStep";
    import Process from "../../views/workManagement/components/process";
    import SuggestionButton from "./Case/SuggestionButton";
    import schoolSignature from "@/api/officialDocument/schoolSignature/index"
    import ScrollPanel from "../Common/ScrollPanel";
    import MyHtml from "./DocumentCase/MyHtml";
    import QianzhangButton from "./Case/Buttons/QianzhangButton";
    import NotesButton from "./Case/Buttons/AddNotesButton";
    import NotesListButton from "./DocumentCase/NotesListButton";
    import BackButton from "./Case/Buttons/BackButton";
    export default {
        name: "WorkflowDetailDialog",
        provide(){
          return {
            fullDialog:true
          }
        },
        components: {
          BackButton,
            NotesListButton,
            NotesButton,
            QianzhangButton,
            MyHtml,
            ScrollPanel,
            SuggestionButton,
            Process,
            TopStep,
            IssueButton,
            ActiveButton,
            CenterBlock, RightSteps, SquareButton, DetailDialogPanel
        },
        inject:{
            workflow_title:{
                type:String,
                default:""
            }
        },
        props: {
            row: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            showActiveBtn: {
                type: Boolean,
                default: false
            },
        },
        computed: {
            glUrl(){
                return process.env.VUE_APP_BASE_API + "/api/document/relation/" + this.row.relation_id+"/"
            },
            showWorkFlow() {
                return this.id
            },
            flowInfo(){
              return this.$store.getters.flowInfo
            }
        },
        watch:{

        },
        data() {
            return {
                model: false,
                current_state_id: "",
                activeName: "first",
                id: "",
                imageList:[],
                visible:false
            };
        },
        created() {
            this.id = this.row.ticket
            if (this.showWorkFlow) {
                this.getDetailInfo()
            }
        },
        mounted() {
            if(this.row.is_send&&this.row.dist_id){
                this.setRead()
            }
            },
        methods: {
            tabClick(tab, event){
              this.$store.dispatch("suggestion/setIsActive",this.activeName=='first')
            },
            showPreview(){
              this.visible = true
            },
            print(){
              window.open(process.env.VUE_APP_BASE_API +"/api/document/spd/"+this.row.id+"/?type_id="+this.row.type_id+"&s=view")
            },
            download(){
              window.open(process.env.VUE_APP_BASE_API +"/api/document/spd/"+this.row.id+"/?type_id="+this.row.type_id)
            },
            setRead(){
                schoolSignature.documentDistRead(this.row.dist_id,{remarks:''}).then(res=>{
                })
            },
            changeModel() {
                this.model = !this.model
                if (this.model) {
                    this.activeName = "sixth"
                } else {
                    this.activeName = "first"
                }
                this.$store.dispatch("suggestion/setIsActive",this.activeName=='first'&&!this.model)
            },
            getDetailInfo() {
              this.$store.dispatch("workManagement/getWorkInfo",this.row)
            },
        }
    };
</script>
<style lang="scss" scoped>
    @import "../../assets/styles/workflow";
</style>
